import { Fragment } from '@/components/Fragment'; 
import { Loader } from '@aws-amplify/ui-react';

import { LoaderDemo } from './demo';
import {
  DefaultLoaderExample,
  DeterminateLoaderExample,
  LoaderAccessibilityExample,
  LoaderColorExample,
  LoaderIsPercentageTextHiddenExample,
  LoaderSizesExample,
  LoaderVariationExample,
  LoaderThemeExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<LoaderDemo />

## Usage

Import the Loader component and styles.

<Example>
  <DefaultLoaderExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultLoaderExample.tsx

    ```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the Loader size. Available options are `small`, `large`, and none (default).

<Example>
  <LoaderSizesExample />
  <ExampleCode>
    ```jsx file=./examples/LoaderSizesExample.tsx

    ```

  </ExampleCode>
</Example>

### Variation

Loader comes in 2 variants, `linear` and none(default). Pass the `variation` prop and set it to either of these values.

<Example>
  <LoaderVariationExample />
  <ExampleCode>
    ```jsx file=./examples/LoaderVariationExample.tsx

    ```

  </ExampleCode>
</Example>

### Colors

Pass `filledColor` and `emptyColor` props to color your own Loader.

<Example>
  <LoaderColorExample />
  <ExampleCode>
    ```jsx file=./examples/LoaderColorExample.tsx

    ```

  </ExampleCode>
</Example>

### Determinate

Most often loaders are indeterminate (looped) but may be determinate (percentage-based) when the system can calculate the size of the request — for example, when downloading a large file. To use a determinate loader, set `isDeterminate` to `true` and pass `percentage`.

<Example>
  <DeterminateLoaderExample />
  <ExampleCode>
    ```jsx file=./examples/DeterminateLoaderExample.tsx

    ```

  </ExampleCode>
</Example>

To hide the percentage text, set `isPercentageTextHidden` to `true`.

<Example>
  <LoaderIsPercentageTextHiddenExample />
  <ExampleCode>
    ```jsx file=./examples/LoaderIsPercentageTextHiddenExample.tsx

    ```

  </ExampleCode>
</Example>

### Accessibility

The Loader is a SVG image with role set to `img` on the outer `<svg>` element. This will tell screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes. You can give it a label by passing `ariaLabel` prop.

<Example>
  <LoaderAccessibilityExample />
  <ExampleCode>
    ```jsx file=./examples/LoaderAccessibilityExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Loader">
  <Example>
    <LoaderThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/LoaderThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Loader" />

### Global styling

To override styling on all Loaders, you can set the Amplify CSS variables with the built-in `.amplify-loader` class.

<Example>
  <Loader className="global-styling-example" />
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-loader {
      --amplify-components-loader-stroke-filled-color: var(--amplify-colors-red-80);
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import { Loader } from '@aws-amplify/ui-react';
    import './styles.css';

    <Loader />;
    ```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Loader, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <Loader className="my-loader" />
  <ExampleCode>
    ```css
    /* styles.css */
    .my-loader {
      width: 5rem;
      height: 5rem;
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import { Loader } from '@aws-amplify/ui-react';
    import './styles.css';

    <Loader className="my-loader" />;
    ```

  </ExampleCode>
</Example>

_Using data attributes:_

<Example>
  <Loader className="data-attribute-styling-example" />
  <ExampleCode>
  ```css
  /* styles.css */
  .amplify-loader[data-size='large'] {
    width: 5rem;
    height: 5rem;
  }
  ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import { Loader } from '@aws-amplify/ui-react';
    import './styles.css';

    <Loader variation="large" />;
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <Loader width="5rem" height="5rem" />
  <ExampleCode>
    ```jsx
    import { Loader } from '@aws-amplify/ui-react';

    <Loader width="5rem" height="5rem" />
    ```

  </ExampleCode>
</Example>